<template>
  <div class="page container">
    <div class="default-address">
      <group>
        <cell v-model="address.address" title="默认地址" placeholder="请输入默认地址" placeholder-align="right">
          <span slot="title"><i class="require-mark">*</i>默认地址</span>
        </cell>
        <cell title="选择地址">
          <div class="region-picker-cont">
            <region-picker ref="addressPicker" v-model="pickerAddress" :data="regions"></region-picker>
          </div>
        </cell>
      </group>
      <p class="tip">新增客户时，这里填写的客户默认地址会自动填写到客户的默认地址输入框，避免在室内无法定位获取默认地址</p>
      <x-button class="scrm-default-btn" @click.native="handleSaveDefaultAddress">保存</x-button>
    </div>
    <x-dialog v-model="this.$store.state.app.dialogShow" >
      <div class="dialog-message">
        {{ this.$store.state.app.dialogMessage }}
      </div>
      <span class="vux-close" @click="hideDialog">知道了</span>
    </x-dialog>
  </div>
</template>
<script>
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import XButton from 'vux/src/components/x-button'
  import XInput from 'vux/src/components/x-input'
  import XDialog from 'vux/src/components/x-dialog'

  import RegionPicker from 'region-picker'
  import { showDialog, hideDialog } from '../lib/dialog'
  import { mapActions, mapState } from 'vuex'

  import data from 'region-picker/src/components/data.json'

  export default {
    watch: {
      pickerAddress (value) {
        const regionPickerElem = this.$refs.addressPicker.$el
        const addressText = this.$refs.addressPicker.$children[0].selected.fullName.replace(/\s/g, '')
        const addressArr = addressText.split('/')
        if (!addressArr) {
          return showDialog('请选择地址！')
        }

        if (addressArr.length < 3) {
          showDialog('请选择区域！')
          addressArr[2] = ''
        } if (addressArr.length < 2) {
          return showDialog('请选择市区！')
        }
        this.address.province = addressArr[0]
        this.address.city = addressArr[1]
        this.address.district = addressArr[2]
        this.address.address = addressArr.join('')
      }
    },
    methods: {
      hideDialog: hideDialog,
      ...mapActions({
        getDefaultAddress: 'getDefaultAddress',
        saveDefaultAddress: 'saveDefaultAddress',
      }),
      handleSaveDefaultAddress () {
        if (!this.address.address) {
          return showDialog('您需要选择一个地址作为默认地址!')
        }

        if (this.lock) {
          return
        }

        this.lock = true
        this.address.team_id = this.teamId

        this.saveDefaultAddress(this.address)
          .then((response) => {
            this.lock = false
            if (response.data.errcode === 0) {
              showDialog('保存默认地址成功！')
            } else {
              showDialog(response.data.errmsg)
            }
          }).catch(() => {
            this.lock = false
            showDialog('系统错误！请联系管理员@')
          })
      },
      initAddress () {
        this.getDefaultAddress({team_id: this.teamId})
          .then((response) => {
            if (response.data.errcode === 0) {
              this.address = response.data.results
            }
          }).catch((e) => {
            console.log(e)
          })
      }
    },
    components: {
      Group,
      Cell,
      XInput,
      XButton,
      XDialog,
      [RegionPicker.name]: RegionPicker,
    },
    data () {
      return {
        teamId: null,
        address: {},
        regions: data,
        pickerAddress: null
      }
    },
    mounted () {
      this.teamId = this.$route.query.team_id
      this.initAddress()
      this.callJsApi('biz.navigation.setTitle', { title: '客户默认地址' })
    }
  }
</script>
<style lang="less">
  @import "../less/base";

  .default-address {
    & .weui-cells {
      overflow: initial;
    }

    .region-picker .picker-menu {
      right: 0px;
    }

    .tip {
      padding: 10px 20px;
      font-size: 12px;
      color: #999999;
    }

    .region-picker-cont {
      // width: 250px;
    }

    .scrm-default-btn {
      margin: 10px auto;
      width: 300px;
    }
  }
</style>
